<template>
    <div style="width: 100%;">
        <div id="tousu" style="width:100%;height:170px"></div>
    </div>
</template>

<script>

export default {
    components: {},
    props: {},
    data() {
        return {
        };
    },
    watch: {},
    computed: {},
    methods: {
        tousu() {
            let myChart = this.$echarts.init(document.getElementById("tousu"));
            let option = {
                color: ['#fff', '#2c68ff', '#fcee51', '#08daaa'],
                title: {
                    textStyle: {
                        align: 'center',
                        color: '#fff',
                        fontSize: 20,
                    },

                    subtextStyle: {
                        color: "#fff"
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    borderWidth: '0',
                    backgroundColor: 'rgba(73,81,92,.95)', //背景颜色
                    textStyle: {
                        color: '#fff', //字体颜色
                    },

                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999',
                        },
                    },
                },
                grid: {
                    left: '2%',
                    right: '4%',
                    bottom: '1%',
                    top: '24%',
                    containLabel: true,
                },

                legend: {
                    data: ['规定期限处置率', '待核实投诉', '不属实投诉', '属实投诉'],
                    textStyle: {
                        color: "#fff"
                    },
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: true, //坐标轴两端不留空
                        axisLine: {
                            show: true, //隐藏X轴轴线
                            lineStyle: {
                                color: '#D9D9D9',
                            },
                        },
                        axisLabel: {
                            show: true,
                            //formatter: '{value}月',
                            textStyle: {
                                padding: [2, 0, 0, 0],
                                color: '#fff',
                            },
                        },
                        axisTick: {
                            show: false, //隐藏X轴刻度
                        },
                        axisPointer: {
                            type: 'shadow',
                        },
                        data: ['1月', '2月', '3月', '4月', '5月'],
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '',
                        min: 0,
                        max: 100,
                        interval: 20,
                        position: 'right',
                        axisLabel: {
                            textStyle: {
                                color: '#fff',
                            },
                            show: true,
                            interval: 'auto',
                            formatter: '{value} %',
                        },

                        //name的样式设计
                        splitLine: {
                            lineStyle: {
                                type: 'solid', //设置网格线类型 dotted：虚线 solid:实线
                                color: '#E9E9E9',
                            },
                        },
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                    {
                        type: 'value',
                        name: '单位：个',
                        min: 0,
                        max: 40,
                        interval: 20,
                        position: 'left',
                        axisLabel: {
                            textStyle: {
                                color: '#fff',
                            },
                        },
                        //name的样式设计
                        nameTextStyle: {
                            align: 'left',
                            padding: [0, 0, 0, -30],
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: 'white'
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(255,255,255,0.3)'
                            }
                        },

                        axisTick: {
                            show: false,
                        },
                    },

                ],
                series: [
                    {
                        name: '规定期限处置率',
                        type: 'line',
                        
                        barWidth: 14, //柱状图宽度
                        itemStyle: {
                            barBorderRadius: 0,
                        },
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + '%'
                            }
                        },
                        data: [100, 100, 100, 100, 100],
                    },
                    {
                        name: '待核实投诉',
                        type: 'bar',
                        stack: true, //堆叠柱状图
                        barWidth: 14, //柱状图宽度
                        data: [0, 0, 0, 0, 2],
                    },
                    {
                        name: '属实投诉',
                        type: 'bar',
                        stack: true, //堆叠柱状图
                        barWidth: 14, //柱状图宽度
                        
                        data: [0, 0, 0, 0, 0],
                    },
                    {
                        name: '不属实投诉',
                        stack: true, //堆叠柱状图
                        barWidth: 14, //柱状图宽度
                        type: 'bar',
                        itemStyle: {
                            // barBorderRadius: [14, 14, 0, 0],
                        },
                        yAxisIndex: 1,
                        data: [24, 19, 36, 25, 27],
                    },
                ],
            };

            myChart.setOption(option);
        },
    },
    created() { },
    mounted() {
        this.tousu()
    }
};
</script>
<style lang="scss" scoped></style>